<!DOCTYPE html>
<html >
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .table{
                border:0 none;
                border-collapse: collapse;
                line-height: 30px;
                margin: 0 auto}
            .table  td {
                border: 1px solid #5b4bd9;
                width: 100px;
                height: 30px;
                font-size: 20px;
            }
        </style>
        <script src = '../js/common.js'></script>
        <script>
            //生成表格
            var students = [
                ["张三","0","21","../img/ad1.jpg"],
                ["李四","0","22","../img/ad2.jpg"],
                ["王五","0","23","../img/ad3.jpg"],
                ["赵六","0","24","../img/ad4.jpg"]
            ];
          /*  window.onload = function(){
              var _div =  document.createElement("div");
              document.body.appendChild(_div);


                for (var i= 0; i<friends.length;i++){
                    var arr = friends[i];
                    //应该在表格建立tr
                   for (var j= 0; j<arr.length;j++){
                      //在这里建立td元素
                   }
                    document.getElementsByClassName("tr").appendChild(friends[i]);
                }
            };*/
            //生成表格的方法

            var grid = function(title, col, data) {
                //表格的标题
                var p = $C('p');
                p.textContent = title;
                p.style.textAlign = "center";
                document.body.appendChild(p);

                //表格部分
                var g = $C('table');
                g.border = 1;
                g.style.margin = '0 auto';
                g.style.width = '80%';
                g.style.border = '1px solid #efefef';
                g.style.borderCollapse = 'collapse';
                document.body.appendChild(g);

                //表格的列头
                var tr = $C('tr');
                g.appendChild(tr);
                for (var i = 0; i < col.length; i++) {
                    var th = $C('th');
                    th.style.width = '25%';
                    th.textContent = col[i];
                    tr.appendChild(th);
                }

                //表格数据展示
                for (var i = 0; i < data.length; i++) {
                    //新建tr元素
                    var tr = $C('tr');
                    g.appendChild(tr);

                    //填充表格的数据展示
                    var arr = data[i];//['张三', '0', 21, '../../xx1.png']
                    for (var j = 0; j < arr.length; j++) {
                        var td = $C('td');
                        //第2列
                        if (1 == j) {
                         //为0给td设置男, 1设置女
                         if (0 == arr[j]) {
                         td.textContent = '男';
                         } else if (1 == arr[j]) {
                         td.textContent = '女';
                         }
                         } else if (3 == j) {//第4列
                            td.style.cursor = 'pointer';
                            td.textContent = '查看';
                            td.setAttribute('path', arr[j]);//设置属性 属性名称 - 属性内容
                            td.onclick = function() {
                                //生成图片对象并且指定图片地址
                                var img = $C('img');
                                img.src = this.getAttribute('path');//访问属性
                                img.style.width = 280 + 'px';
                                img.style.height = 180 + 'px';
                                //调用窗口方法,将图片对象传递给窗口
                                win(300, 240, '大头照', img);
                            };
                        } else {
                            //非第2列
                            td.textContent = arr[j];
                        }

                        tr.appendChild(td);
                    }
                }
            };


            window.onload = function() {
                grid('花名册', ['姓名', '性别', '年龄', '照片'], students);
            };
        </script>
    </head>
    <body>

    </body>
</html>